import React from "react";
import routeWithUserSession from "@/components/ApplicationArea/routeWithUserSession";
import Button from "antd/lib/button";
import Col from "antd/lib/col";
import Divider from "antd/lib/divider";
import Row from "antd/lib/row";
import Table from "antd/lib/table";
import ConfigProvider from "antd/lib/config-provider";
import Layout from "antd/lib/layout";
import AutoComplete from "antd/lib/auto-complete";
import zhCN from 'antd/es/locale/zh_CN';
import QueryShowField from "@/services/queryshowfield";
import { currentUser } from "@/services/auth";
import routes from "@/services/routes";
import navigateTo from "@/components/ApplicationArea/navigateTo";
import CreateQueryShowFieldDialog from "@/components/enums/QueryShowFieldDialog";

const getRowClassName = (record, index) => {
  let className = '';
  if (index % 2 === 0) className = "oddRow";
  return className
}

class QueryShowFieldList extends React.Component {
  state = {
    page: 1,
    pagesize: localStorage.getItem("queryshowfieldpagesize") ? (localStorage.getItem("queryshowfieldpagesize") !== undefined ? Number(localStorage.getItem("queryshowfieldpagesize")) : 20) : 20,
    total: 1,
    order: 1,
    loading: false,
    code: localStorage.getItem("queryshowfieldcode") ? (localStorage.getItem("queryshowfieldcode") !== undefined ? localStorage.getItem("queryshowfieldcode") : '') : '',
    name: localStorage.getItem("queryshowfieldname") ? (localStorage.getItem("queryshowfieldname") !== undefined ? localStorage.getItem("queryshowfieldname") : '') : '',
    data: [],
  };
  componentWillMount() {
    let param = {
      page: this.state.page,
      pagesize: this.state.pagesize,
      code: this.state.code,
      name: this.state.name,
      userid: currentUser.id,
    }
    this.seldata(param);
  }
  isEmptyobj = (str) => {
    if (str === '' || str === null || str === 'null' || str === undefined || str === 'undefined') {
      return true;
    } else {
      return false;
    }
  }
  seldata = (params = {}) => {
    this.setState({ loading: true });
    QueryShowField.getlist(params).then(data => {
      this.setState({
        loading: false,
        data: data.data,
        page: params.page,
        pagesize: params.pagesize,
        total: data.total,
        field: params.field,
        order: params.order,
      });
    });
  };

  handlesel = (index) => {

    let param = {
      page: 1,
      pagesize: this.state.pagesize,
      code: this.state.code,
      name: this.state.name,
      userid: currentUser.id,
    }
    this.seldata(param);
  };
  handleTableChange = (pagination, filters, sorter) => {
    localStorage.setItem("queryshowfieldpagesize", pagination.pageSize);
    let field = sorter.field;
    let order = 0;
    if (sorter.order === "descend") {
      order = 1;
    }
    let param = {
      field: field,
      order: order,
      page: pagination.current,
      pagesize: this.state.pagesize,
      code: this.state.code,
      name: this.state.name,
      userid: currentUser.id,
    }
    this.seldata(param);
  };
  handleUpdate = record => {
    let param = {
      page:  this.state.page,
      pagesize: this.state.pagesize,
      code: this.state.code,
      name: this.state.name,
      userid: currentUser.id,
    }
    CreateQueryShowFieldDialog.showModal({ queryshowfield: record })
      .onClose((result = {}) => {
        if (result.success) {
          this.seldata(param);
        }
      }).onDismiss(() => {
        navigateTo("queryshowfield", true);
      });
  };
  onDragEnter = info => {
    window.console.log(info);
  };
  render() {
    const paginationProps = {
      showSizeChanger: true,
      total: this.state.total, // 数据总数
      pageSize: parseInt(this.state.pagesize), // 每页条数
      current: parseInt(this.state.page), // 当前页码
      pageSizeOptions: ["10", "20", "30", "100"],
      showTotal: ((total) => {
        return `共 ${total} 条`;
      }),
    };
    let listcolumns = [];
    listcolumns.push({
      title: '编码',
      key: 'code',
      dataIndex: 'code',
      render: (text, record) => (
        <a className="clickable" onClick={() => this.handleUpdate(record)}>{text}</a>
      ),
      sorter: (a, b) => a.code > b.code ? 1 : -1
    });
    listcolumns.push({
      title: '名称',
      dataIndex: 'name',
      key: 'name',
      sorter: (a, b) => a.name > b.name ? 1 : -1
    });
    listcolumns.push({
      title: '备注',
      dataIndex: 'message',
      key: 'message',
      sorter: (a, b) => a.message > b.message ? 1 : -1
    });

    return (
      <ConfigProvider locale={zhCN}>
        <div style={{ width: "400px", height: "60px" }}>
          <div style={{ width: "20px", height: "50px", float: "left" }}>
          </div>
          <div style={{ width: "50px", height: "50px", float: "left" }}>
            <img src="/static/images/queryshowfieldlist.png" alt="HR"  loading="lazy"/>
          </div>
          <div style={{ width: "320px", height: "30px", float: "left" }}>
            <h3 style={{ margin: "7px", padding: "0" }}>{"列表显示隐藏列"}</h3>
          </div>
        </div>
        <Layout>
          <Layout style={{ padding: '0 24px 24px' }}>
            <Row style={{ marginBottom: 5 }}>
              <Col span={2}><div style={{ marginTop: "5px", textAlign: "right", marginRight: "10px" }}>
                编码:</div></Col>
              <Col span={6}>
                <AutoComplete
                  style={{ width: "100%" }}
                  value={this.state.code}
                  onChange={value => {
                    localStorage.setItem("queryshowfieldlistcode", value);
                    this.setState({ code: value });
                  }}
                  placeholder="编码"
                  filterOption={(inputValue, option) =>
                    option.value.indexOf(inputValue) !== -1}>
                </AutoComplete>
              </Col>
              <Col span={2}><div style={{ marginTop: "5px", textAlign: "right", marginRight: "10px" }}>
                名称:</div></Col>
              <Col span={6}>
                <AutoComplete
                  style={{ width: "100%" }}
                  value={this.state.name}
                  onChange={value => {
                    localStorage.setItem("queryshowfieldlistname", value);
                    this.setState({ name: value });
                  }}
                  placeholder="名称"
                  filterOption={(inputValue, option) =>
                    option.value.indexOf(inputValue) !== -1}>
                </AutoComplete>
              </Col>
            </Row>
            <Row style={{ marginBottom: 5 }}>
              <Col span={10}>
                <Button type="primary" onClick={() => this.handlesel(1)} >
                  <i className="fa fa-search m-r-5" />
                  查询
                </Button>
                <Divider type="vertical" />
                <Button type="primary" >
                  <i className="fa fa-plus m-r-5" />
                  <a href="queryshowfield/new/0" style={{ color: "white" }}>款项录入</a>
                </Button>
                <Divider type="vertical" />
              </Col>
            </Row>
            <div>
              <Table rowKey='id'
                rowClassName={(record, index) => getRowClassName(record, index)}
                columns={listcolumns}
                scroll={{ x: 'max-content' }}
                dataSource={this.state.data}
                pagination={paginationProps}
                loading={this.state.loading}
                onChange={this.handleTableChange}
              />
            </div>
          </Layout>
        </Layout>
      </ConfigProvider>
    );
  }
}

routes.register(
  "QueryShowField.List",
  routeWithUserSession({
    path: "/queryshowfield",
    title: "列表显示隐藏列",
    render: pageProps => <QueryShowFieldList {...pageProps} />,
  })
);
